<template>
  <view class="container">
    <uni-section title="个人资料" type="line">
    	<view class="info-example">
    		<uni-forms border>
          <uni-forms-item class="">
            <view class="info-example-item">
              <view class="info-example-item-text">头像:</view>
              <image class="act-img" :src="defaultImage" mode="scaleToFill"></image>
            </view>
          </uni-forms-item>
    			<uni-forms-item class="">
            <view class="info-example-item">
              <view class="info-example-item-text">姓名:</view>
              <input class="input" type="text" placeholder="请输入姓名" style="direction: rtl;">
            </view>
    			</uni-forms-item>
    			<uni-forms-item class="">
            <view class="info-example-item">
              <view class="info-example-item-text">性别:</view>
              <view class="gender-select">
                <uni-data-select
                  v-model="genderValue"
                  :localdata="gender"
                  @change="change"
                  :clear="false"
                ></uni-data-select>
              </view>
            </view>
    			</uni-forms-item>
          <uni-forms-item class="">
            <view class="info-example-item">
              <view class="info-example-item-text">手机号码:</view>
              <input class="input" type="text" placeholder="请输入手机号码" style="direction: rtl;">
            </view>
          </uni-forms-item>
          <uni-forms-item class="">
            <view class="info-example-item">
              <view class="info-example-item-text">服务区域:</view>
              <view class="area-select">
                <uni-data-select
                  v-model="Value"
                  :localdata="area"
                  @change="change"
                  :clear="false"
                ></uni-data-select>
              </view>
            </view>
          </uni-forms-item>
          <uni-forms-item class="">
            <view class="info-example-item">
              <view class="info-example-item-text">详细地址:</view>
              <input class="input" type="text" placeholder="请输入详细地址" style="direction: rtl;">
            </view>
          </uni-forms-item>
          <uni-forms-item class="">
            <view class="info-example-item">
              <view class="info-example-item-text">手机验证码:</view>
              <button class="code-btn" type="primary" size="mini">获取验证码</button>
            </view>
          </uni-forms-item>
    		</uni-forms>
    	</view>
    </uni-section>
    <button class="info-save"><text class="info-save-text">保存</text></button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        defaultImage:'https://img2.baidu.com/it/u=1807443568,704507401&fm=253&fmt=auto&app=138&f=JPEG?w=524&h=500',
        gender:[
          {genderValue: 0,text:"男"},
          {genderValue: 1,text:"女"},
          {genderValue: 2,text:"未知"}
        ],
        genderValue:2,
        area:[
          {areaValue: 0,text:"湖南省长沙市岳麓区"},
          {areaValue: 1,text:"湖南省长沙市开福区"},
          {areaValue: 2,text:"湖南省长沙市雨花区"},
          {areaValue: 3,text:"湖南省长沙市天心区"},
          {areaValue: 4,text:"湖南省长沙市望城区"},
          {areaValue: 5,text:"湖南省长沙市芙蓉区"}
        ],
        Value:0
      };
    }
  }
</script>

<style lang="scss">
.info-example {
		padding: 0 15px;
		background-color: #fff;
    .info-example-item{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .act-img{
        width: 80rpx;
        height: 80rpx;
        border: 1rpx solid #ccc;
        border-radius: 80rpx;
      }
      .gender-select{
        width: 130rpx;
      }
      .area-select{
        width:320rpx;
      }
      .code-btn{
        margin-right: 0;
      }
    }
    .uni-forms-item__content{
      line-height: 72rpx;
    }
    
	}
  .info-save{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0;
    background-color: #3F51B5;
    border-radius: unset;
    &:after{
      border-radius: 0;
      background-color: unset;
      border: none;
    }
    .info-save-text{
      color: #fff;
      font-size: 36rpx;
    }
  }
</style>
